<template>
  <div class="app-container">
    <div class="app-head">
      <el-form>
        <el-row type="flex" justify="start">
          <el-col :span="10">
            <el-form-item label="产品ID" label-width="80px">
              <el-input ref="vipHeight" v-model="productId" style="width:90%" size="mini" />
            </el-form-item>
          </el-col>

          <el-col v-show="platformArr.length > 1" :span="7">
            <el-form-item label="所属平台:" label-width="100px">
              <el-radio-group v-model="radio1" size="mini" style="margin-left: -10px;margin-right:-4px">
                <el-radio-button label="0">精确</el-radio-button>
                <el-radio-button label="1">模糊</el-radio-button>
              </el-radio-group>
              <el-select
                v-model="platformId"
                multiple
                style="width:60%"
                size="mini"
                placeholder="请选择"
              >
                <el-option
                  v-for="item of platformArr"
                  :key="item.idVal"
                  :value="item.idVal"
                  :label="item.powerName"
                />
                <!-- <el-option
                  v-for="item of pay"
                  :key="item.billingChannelId"
                  :value="item.billingChannelId"
                  :label="item.billingChannelName"
                /> -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2" class="flexd">
            <span v-show="platformArr.length > 0">
              <el-button
                v-powerbtn="{power:'business-checkProduct-search'}"
                size="mini"
                type="primary"
                round
                icon="el-icon-search"
                @click="loadList"
              >查询</el-button>
            </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="审核时间" label-width="80px">
              <el-date-picker
                v-model="startDate"
                :picker-options="pickerOptions1"
                :editable="false"
                :style="tiemLen"
                type="datetime"
                size="mini"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss   "
                placeholder="选择开始时间"
                @change="checkStartTime"
              />
              <span style="display: inline-block;width:16px;">至</span>
              <el-date-picker
                v-model="endDate"
                :picker-options="pickerOptions2"
                :editable="false"
                type="datetime"
                size="mini"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss   "
                placeholder="选择结束时间"
                :style="tiemLen"
                @change="checkTime"
              />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="产品名称" label-width="100px">
              <el-input v-model="productName" style="width:90%" size="mini" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="审核状态" label-width="80px">
              <el-select
                v-model="status"
                style="width:90%"
                size="mini"
                placeholder="请选择"
              >
                <el-option value="" label="全部" />
                <el-option value="1" label="审核中" />
                <el-option value="2" label="已撤回" />
                <el-option
                  v-for="item of pay"
                  :key="item.billingChannelId"
                  :value="item.billingChannelId"
                  :label="item.billingChannelName"
                />
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="2" class="flexd">
            <el-button
              size="mini"
              round
              icon="el-icon-refresh"
              @click="reset"
            >重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="app-table">
      <el-table :data="list" border style="width: 100%">
        <el-table-column label="产品ID">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.productId" :content="scope.row.productId" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.productId }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="产品名称">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.productName" :content="scope.row.productName" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.productName }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="提交审核时间">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.submitTime" :content="scope.row.submitTime" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.submitTime }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.status === '0'">
              未审核
            </span>
            <span v-if="scope.row.status === '1'">
              审核通过
            </span>
            <span v-if="scope.row.status === '2'">
              审核不通过
            </span>
            <span v-if="scope.row.status === '3'">
              已撤回
            </span>
          </template>
        </el-table-column>
        <el-table-column label="产品类型">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.productNameType" :content="scope.row.productNameType" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.productNameType }}</span>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column label="创建人">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.createPerson" :content="scope.row.createPerson" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.createPerson }}</span>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column label="所属平台名称">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.ssPlatforms" :content="scope.row.ssPlatforms" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.ssPlatforms }}</span>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button
              v-powerbtn="{power:'business-checkProduct-find'}"
              type="primary"
              round
              style="margin-left:0"
              size="mini"
              plain
              @click="watch(scope.row.id, scope.row.productId)"
            >查看</el-button>
            <el-button
              v-powerbtn="{power:'business-checkProduct-pass'}"
              type="primary"
              size="mini"
              round
              plain
              style="margin-left:0"
              @click="pass(scope.row.id, scope.row.productId)"
            >通过</el-button>
            <el-button
              v-powerbtn="{power:'business-checkProduct-unpass'}"
              type="primary"
              size="mini"
              round
              plain
              style="margin-left:0"
              @click="noPass(scope.row.id, scope.row.productId)"
            >不通过</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination :current-page="pageid" :page-sizes="[20,50,100]" :page-size="pagecount" :total="count" background highlight-current-row layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <watch-info :detail-dialog="detailDialog" :pro-id="proId" :key-id="keyId" @closeWatch="closeWatch" />
    <!--  <add-expenses :add-dialog="addDialog" :pay-select="paySelect" @closeAdd="closeAdd" />
    <edit-expenses :edit-dialog="editDialog" :watch-id="watchId" :pay-select="paySelect" @closeEdit="closeEdit" /> -->
  </div>
</template>
<script>
import { getList, checkPass, checkNoPass } from '@/api/productCheck.js'
import powerbtn from '@/directive/powerbtn/index.js'
import { getSelectS } from '@/api/product.js'
import { mapGetters } from 'vuex'
import watchInfo from './components/watch.vue'
export default {
  directives: {
    powerbtn
  },
  components: {
    watchInfo: watchInfo
  },
  data() {
    return {
      list: [], // 请求列表
      radio1: '0',
      flag: true,
      tiemLen: '',
      productId: '', // 产品ID
      productName: '', // 产品名称
      platformId: [], // 平台
      aaType: [],
      startSubmitTime: '', // 审核开始时间
      endSubmitTime: '', // 审核结束时间
      status: '', // 状态
      platformArr: [],
      platFormName: [],
      pageid: 1, // 当前页数
      pagecount: 20, // 每页可显示条数
      statuss: false, // 请求状态
      detailDialog: false, // 查看遮罩
      editDialog: false, // 编辑遮罩
      count: 0, // 总数量
      keyId: '0',
      proId: '0',
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      startDate: '',
      endDate: ''
    }
  },
  computed: {
    ...mapGetters(['plat'])
  },
  mounted() {
    this.$nextTick(() => {
      var len = this.$refs.vipHeight.$el.offsetWidth / 2 - 10
      console.log(len)
      this.tiemLen = {
        'width': len + 'px'
      }
    })
    this.platformArr = this.plat
    if (this.platformArr.length > 1) {
      this.platformArr.forEach(item => {
        var len = item.powerCode.lastIndexOf('-')
        item.idVal = item.powerCode.substr(len + 1)
      })
      this.getSee()
    }
    if (this.platformArr.length === 1) {
      var sina = this.platformArr[0].powerCode.lastIndexOf('-')
      this.platformId = this.platformArr[0].powerCode.substr(sina + 1)
      this.getSee()
    }
  },
  methods: {
    getSee() {
      // 产品类型
      var typess = {
        functionType: 'productType'
      }
      getSelectS(typess).then(res => {
        this.aaType = res.data.list
        // getSelectS({ functionType: 'platform' }).then(res => {
        // this.platformArr = res.data.list
        this.loadList(true)
        // })
      })
    },
    // 查看
    watch(id, productId) {
      this.detailDialog = true
      this.keyId = id + ''
      this.proId = productId
    },
    // 通过审核
    pass(id, productId) {
      var data = {
        id: id,
        productId: productId
      }
      this.$confirm('确定通过审核吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        checkPass(data).then(res => {
          if (res.resultCode === '0000') {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.loadList()
          }
        })
      }).catch(() => {
        console.log('操作取消')
      })
    },
    // 不通过
    noPass(id, productId) {
      this.$prompt('确认不通过该产品的审核吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '请输入不通过原因'
      }).then(({ value }) => {
        var data = {
          id: id,
          productId: productId,
          reason: value
        }
        checkNoPass(data).then(res => {
          if (res.resultCode === '0000') {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.loadList()
          }
        })
      }).catch(() => {
        console.log('操作取消')
      })
    },
    // 查看回调
    closeWatch(val) {
      if (val) {
        this.loadList()
      }
      this.detailDialog = false
    },
    loadList(val) {
      this.pageid = 1
      if (val === true) {
        var len = this.platformArr.length
        if (len > 1) {
          this.radio1 = '1'
        } else {
          this.radio1 = '0'
        }
      }
      const request = {
        inquiryMode: this.radio1,
        productId: this.productId === '' ? null : this.productId,
        productName: this.productName === '' ? null : this.productName,
        platformIds: Array.isArray(this.platformId) ? this.platformId.join(',') + ',' : this.platformId + ',',
        startSubmitTime: !this.startDate ? null : this.startDate.trim(),
        endSubmitTime: !this.endDate ? null : this.endDate.trim(),
        // status: this.status,
        pageNum: 1, // 当前页数
        limit: 20 // 每页可显示条数
      }
      getList(request).then(res => {
        if (res.resultCode === '0000') {
          this.list = res.data.list
          this.count = parseInt(res.data.total) // 总数量
          if (this.list.length > 0) {
            this.aaType.forEach(num => {
              this.list.forEach(item => {
                if (item.productType === num.typeId) {
                  item.productNameType = num.typeName
                }
              })
            })
          }
          this.statuss = true
        }
      }).catch(() => {
        this.$message({
          message: '请求列表失败',
          type: 'error'
        })
      })
    },
    // 重置
    reset() {
      if (this.platformArr.length > 1) {
        this.radio1 = '1'
        this.platformId = []
      }
      this.productId = ''
      this.productName = ''
      this.startDate = ''
      this.endDate = ''
    },
    // 校验开始时间
    checkStartTime(time) {
      const reg = new RegExp('-', 'g')
      // 比较是否大于现在的时间
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(reg, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.startDate = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var end
          if (this.endDate !== null) {
            end = new Date(this.endDate.replace(reg, '/')).getTime()
          } else {
            end = ''
          }
          var first = new Date(time.replace(reg, '/')).getTime()
          if (!!end && first > end) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.startDate = ''
          }
        }
      }
    },

    // 校验结束时间
    checkTime(time) {
      const reg = new RegExp('-', 'g')
      // console.log(newStr)
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(reg, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.endDate = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var start
          if (this.startDate !== null) {
            start = new Date(this.startDate.replace(reg, '/')).getTime()
          } else {
            start = ''
          }
          var end = new Date(time.replace(reg, '/')).getTime()
          if (end < start) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.endDate = ''
          }
        }
      }
    },
    // 当前页面显示条数改变时
    handleSizeChange(num) {
      this.flag = false
      const request = {
        inquiryMode: this.radio1,
        productId: this.productId === '' ? null : this.productId,
        productName: this.productName === '' ? null : this.productName,
        platformIds: Array.isArray(this.platformId) ? this.platformId.join(',') + ',' : this.platformId + ',',
        startSubmitTime: !this.startDate ? null : this.startDate.trim(),
        endSubmitTime: !this.endDate ? null : this.endDate.trim(),
        pageNum: 1, // 当前页数
        limit: num // 每页可显示条数
      }
      console.log('请求数据')
      console.log(request)
      getList(request).then(res => {
        if (res.resultCode === '0000') {
          this.list = res.data.list
          this.count = parseInt(res.data.total) // 总数量
          if (this.list.length > 0) {
            this.aaType.forEach(num => {
              this.list.forEach(item => {
                if (item.productType === num.typeId) {
                  item.productNameType = num.typeName
                }
              })
            })
          }
          this.statuss = true
        }
      }).catch(() => {
        this.$message({
          message: '请求列表失败，请重试',
          type: 'error'
        })
      })
    },

    // 跳转某页
    handleCurrentChange(num) {
      console.log(num)
      this.pageid = num // 当前页数
      const request = {
        inquiryMode: this.radio1,
        productId: this.productId === '' ? null : this.productId,
        productName: this.productName === '' ? null : this.productName,
        platformIds: Array.isArray(this.platformId) ? this.platformId.join(',') + ',' : this.platformId + ',',
        startSubmitTime: !this.startDate ? null : this.startDate.trim(),
        endSubmitTime: !this.endDate ? null : this.endDate.trim(),
        pageNum: num, // 当前页数
        limit: this.pagecount // 每页可显示条数
      }
      console.log('请求数据')
      console.log(request)
      // if (this.flag === true) {
      getList(request).then(res => {
        if (res.resultCode === '0000') {
          this.list = res.data.list
          this.count = parseInt(res.data.total) // 总数量
          if (this.list.length > 0) {
            this.aaType.forEach(num => {
              this.list.forEach(item => {
                if (item.productType === num.typeId) {
                  item.productNameType = num.typeName
                }
              })
            })
          }
          this.statuss = true
        }
      })
      // }
    }
  }
}
</script>
<style>
.el-radio-button--mini .el-radio-button__inner{
  padding: 7px 7px !important;
}
.el-radio-button__inner{
  font-size: 10px !important;
}
</style>
